<template>
  <div>
    <div class="wrapper div-align-justify-center">
      <div class="block-all">
        <div class="block">
          <img class="circle-img" src="@/static/images/todo/tick-circle-big.png">
          <span class="heading-h3 block-title">待办事项已完成</span>
          <div class="content">
            <div class="content-title paragraph-p2-light">事项</div>
            <div class="paragraph-p3-light">{{ todoInfo.title }}</div>
          </div>
          <div class="author">
            <div class="author-title paragraph-p2-light">创建人</div>
            <div class="author-content paragraph-p3-light">
              <div class="author-content-img">
                <img class="icon-cycle-32" :src="todoInfo.createUserImage ? todoInfo.createUserImage : defaultUserAvatar" alt=""/>
              </div>
              <div class="author-content-left">{{ todoInfo.createUser }}</div>
              <div class="author-content-right">{{ todoInfo.createTime }}</div>
            </div>
          </div>
          <div class="author">
            <div class="author-title paragraph-p2-light">完成人</div>
            <div class="author-content paragraph-p3-light">
              <div class="author-content-img">
                <img class="icon-cycle-32" :src="todoInfo.updateUserImage ? todoInfo.updateUserImage : defaultUserAvatar" alt=""/>
              </div>
              <div class="author-content-left">{{ todoInfo.updateUser }}</div>
              <div class="author-content-right">{{ todoInfo.updateTime }}</div>
            </div>
          </div>
        </div>
        <div class="block-cancel" @click="cancel">
          <img class="close-img" src="@/static/images/todo/close-circle.png">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {Overlay} from "vant";
import UserAvatar from '@/static/images/profile/user-default.jpg'
export default {
  name: "TodoInfo",
  props: {
    todoInfo: {type: Object, default: () => ({})},
  },
  components: {
    [Overlay.name]: Overlay,
  },
  data() {
    return {
      defaultUserAvatar: UserAvatar,
    };
  },
  methods: {
    cancel() {
      this.$emit("todoDetailCancelEvent")
    },
  },
};
</script>

<style scoped>
.wrapper {
  height: 100vh;
}
.block-all{
  height: 424px;
}
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 24px ;
  width: 327px;
  height: 408px;
  background: #FFFFFF;
  border-radius: 16px;
  color: #424242;
}
.block-cancel{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.block-title{
  margin-top: 8px;
}
.circle-img{
  width: 56px;
  height: 56px;
  margin-top: 32px;
}
.close-img{
  padding-top: 16px;
  width: 40px;
  height: 40px;
}
.content{
  width: 279px;
  margin-top: 8px;
  padding: 0px 24px;
}
.content-title{
  color: #424242;
}
.author{
  margin-top: 24px;
  width: 279px;
  padding: 0px 24px;
}
.author-title{
  color: #737373;
  height: 32px;
}
.author-content{
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}
.author-content-img {
  height: 32px;
  border-radius: 16px;
}
.author-content-left{
  display: inline-block;
  padding-top: 4px;
  padding-left: 4px;
  width: 105px;
}
.author-content-right{
  display: inline-block;
  padding-top: 4px;
  padding-left: 8px;
  width: 142px;
  text-align: right;
}
.author-content > img{
  width: 32px;
  height: 32px;
}
</style>